import { CanvasContext } from "./designType";

export class Point {
  x: number;
  y: number;
  type: "line" | "bezier" | "arc" | "rect" | "polygon";

  // 可选属性
  control1?: { x: number; y: number };
  control2?: { x: number; y: number };
  end?: { x: number; y: number };
  radius?: number;
  startAngle?: number;
  endAngle?: number;
  width?: number;
  height?: number;
  vertices?: { x: number; y: number }[]; // 用于存储多边形顶点的数组
  // 新增样式属性
  strokeColor: string = "#000000";  // 默认描边颜色
  fillColor?: string;               // 可选填充颜色
  lineWidth: number = 1;            // 默认线宽
  isDashed: boolean = false;        // 是否使用虚线

  constructor(
    x: number,
    y: number,
    type: "line" | "bezier" | "arc" | "rect" | "polygon" = "line",
    options: {
      control1?: { x: number; y: number };
      control2?: { x: number; y: number };
      end?: { x: number; y: number };
      radius?: number;
      startAngle?: number;
      endAngle?: number;
      width?: number;
      height?: number;
      vertices?: { x: number; y: number }[]; // 允许传入多边形的顶点数组
      strokeColor?: string;
      fillColor?: string;
      lineWidth?: number;
      isDashed?: boolean;
    } = {}
  ) {
    this.x = x;
    this.y = y;
    this.type = type;

    // 可选属性赋值
    this.control1 = options.control1;
    this.control2 = options.control2;
    this.end = options.end;
    this.radius = options.radius;
    this.startAngle = options.startAngle;
    this.endAngle = options.endAngle;
    this.width = options.width;
    this.height = options.height;
    this.vertices = options.vertices;
        // 样式属性赋值
    this.strokeColor = options.strokeColor || this.strokeColor;
    this.fillColor = options.fillColor;
    this.lineWidth = options.lineWidth || this.lineWidth;
    this.isDashed = options.isDashed || this.isDashed;
  }

  // 绘制方法，根据 type 绘制不同的形状
  draw(ctx: CanvasContext, 
    origin: { x: number; y: number } = { x: 0, y: 0 }, 
    scale: number = 1
    ): void {
    const scaledX = origin.x + this.x * scale;
    const scaledY = origin.y + this.y * scale;
    ctx.beginPath();

    // 设置样式
    ctx.strokeStyle = this.strokeColor;
    ctx.lineWidth = this.lineWidth;
    if (this.isDashed) {
      ctx.setLineDash([5, 5]);
    } else {
      ctx.setLineDash([]);
    }
    switch (this.type) {
      case "line":
        ctx.moveTo(scaledX, scaledY);
        if (this.end) {
          ctx.lineTo(origin.x + this.end.x * scale, origin.y + this.end.y * scale);
        }
        break;
      case "bezier":
        if (this.control1 && this.control2 && this.end) {
          ctx.moveTo(scaledX, scaledY);
          ctx.bezierCurveTo(
            origin.x + this.control1.x * scale, origin.y + this.control1.y * scale,
            origin.x + this.control2.x * scale, origin.y + this.control2.y * scale,
            origin.x + this.end.x * scale, origin.y + this.end.y * scale
          );
        }
        break;
      case "arc":
        if (this.radius !== undefined && this.startAngle !== undefined && this.endAngle !== undefined) {
          ctx.arc(scaledX, scaledY, this.radius * scale, this.startAngle, this.endAngle);
        }
        break;
      case "rect":
        if (this.width !== undefined && this.height !== undefined) {
          ctx.rect(scaledX, scaledY, this.width * scale, this.height * scale);
        }
        break;
      case "polygon":
        if (this.vertices && this.vertices.length > 0) {
          ctx.beginPath()
          ctx.moveTo(scaledX + this.vertices[0].x * scale, scaledY + this.vertices[0].y * scale);
          this.vertices.forEach(vertex => {
            ctx.lineTo(scaledX + vertex.x * scale, scaledY + vertex.y * scale);
          });
          ctx.closePath();
        }
        break;
    }
    if (this.fillColor) {
      ctx.fillStyle = this.fillColor;
      ctx.fill();
    }
    ctx.stroke();
  }
}